﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
       h1+p {
            color: red;
        }
        h1~p {
            background-color: yellow;
        }
        ul li:first-child { background-color: #f00; }
        ul li:nth-child(4) { background-color: #00f; }
        ul li:last-child{ background-color: #0f0; }

        ul li:nth-child(2n+1) { font-weight:bold; }
        ul li:nth-child(2n){ font-style:italic;}


    </style>
</head>
<body>
    <header>
        <h1>Header</h1>
    </header>
    <nav>
        <ul>
            <li>
                <a href="#item1">Item 1</a>
            </li>
            <li>
                <a href="#item2">Item 2</a>
            </li>
            <li>
                <a href="#item3">Item 3</a>
            </li>
            <li>
                <a href="#item4">Item 4</a>
            </li>
            <li>
                <a href="#item5">Item 5</a>
            </li>
            <li>
                <a href="#item6">Item 6</a>
            </li>
        </ul>
    </nav>

    <article>
        <h1>Article</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <footer>
            Article footer
        </footer>
    </article>
    <footer>
        Body footer 
    </footer>

</body>
</html>
